<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset=utf-8>
	<meta name=description content="">
	<meta name=viewport content="width=device-width, initial-scale=1">
	<script type="text/javascript">
	(function (designW) {
		var docEl = document.documentElement,
			resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
			recalc = function () {
				var clientWidth = docEl.clientWidth;
				if (!clientWidth) return;
				docEl.style.fontSize = 100 * (clientWidth / designW) + 'px';
			};
		if (!document.addEventListener) return;
			recalc();
		window.addEventListener(resizeEvt, recalc, false);
		document.addEventListener('DOMContentLoaded', recalc, false);
	})(750);
	</script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="p-take2">
<div class="wrapper">
	<div class="head"></div>
	<div class="tack-block">
		<div class="picture-cover"></div>
		<div class="picture-container">
			<img id="picture" class="picture" src="timg.jpg" alt="">
			<div id="picture-move" class="picture-move"></div>
		</div>
		<div class="vivo-logo"></div>
	</div>
	<div class="texts">
		移动或缩放图片，调整最佳柔光区域（圈外）
	</div>
	<div class="choose">
		<!-- <div class="choose1 active"></div>
		<div class="choose2"></div>
		<div class="choose3"></div> -->
		<a class="back"></a>
		<a id="finish" class="finish"></a>
	</div>
	<div class="take-bg"></div>
</div>
<script src="jq.js"></script>
<script src="alloy_finger.js"></script>
<script src="transform.js"></script>
<script>
	var picture = document.getElementById("picture");
	var pictureMove = document.getElementById("picture-move");
    Transform(picture);
    var initScale = 1;
    new AlloyFinger(pictureMove, {
        pressMove:function(evt){
            picture.translateX += evt.deltaX;
            picture.translateY += evt.deltaY;
            evt.preventDefault();
        },
        multipointStart: function () {
            initScale = picture.scaleX;
        },
        pinch: function (evt) {
            picture.scaleX = picture.scaleY = initScale * evt.scale;
        }
    });
    document.getElementById('finish').onclick = function(e) {
    	location.href = 'http://vivo.ixunlu.cn/take3.html?x=' + picture.translateX + '&y=' + picture.translateY + '&w1=' + $(window).width() + '&scale=' + picture.scaleX;
    }
    setTimeout(function() {
    	$('#picture-move').css({
    		backgroundImage: 'none'
    	});
    }, 1500);
</script>
</body>
</html>